<template>
  <div>
    <!-- 列表 -->
    <basic-layout title="突发安全隔离登记 " @handleAdd="handleAdd">
      <div class="columnFlex">
        <!-- 查询条件 -->
        <van-row class="search-row">
          <van-search
            v-model="formData.keyword"
            maxlength="20"
            show-action
            label=""
            placeholder="姓名"
            @search="onRefresh"
          >
            <template #action>
              <div @click="onRefresh">搜索</div>
            </template>
          </van-search>
          <div class="filter-icon">
            <van-icon
              name="filter-o"
              @click="$refs.queryPopupRef.show = true"
            />
          </div>
        </van-row>
        <!-- 列表 -->
        <van-row class="listCon">
          <van-pull-refresh
            class="pullRefresh"
            v-model="refreshLoading"
            @refresh="onRefresh"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="listData.length ? '没有更多了' : ''"
              @load="onLoad"
            >
              <van-swipe-cell v-for="val in listData" :key="val.quarantineId">
                <div class="cellContent" @click="handleDetail(val)">
                  <div class="top">
                    <div class="flexTit">
                      <div class="title">
                        <span>{{ val.ctrlor }}</span>
                        <van-tag
                          class="vanTagStyle"
                          color="rgb(242, 168, 78)"
                          v-if="val.isSelfFlag === '1'"
                        >
                          <span>代</span>
                        </van-tag>
                      </div>
                      <div class="healthColor">
                        <!-- <span :class="'status4'" v-if="val.isSelfFlag == '1'">{{
                          "代"
                        }}</span> -->
                        <span
                          v-if="val.healthColor == '1'"
                          style="
                            color: green;
                            font-weight: 600;
                            line-height: 45px;
                          "
                          >{{ val.healthColorLabel }}</span
                        >
                        <span
                          v-if="val.healthColor == '2'"
                          style="
                            color: rgb(204, 150, 66);
                            font-weight: 600;
                            line-height: 45px;
                          "
                          >{{ val.healthColorLabel }}</span
                        >
                        <span
                          v-if="val.healthColor == '3'"
                          style="
                            color: red;
                            font-weight: 600;
                            line-height: 45px;
                          "
                          >{{ val.healthColorLabel }}</span
                        >
                      </div>
                    </div>
                    <div class="second">
                      {{ val.empNatureLabel }}
                    </div>
                  </div>
                  <div class="bottom">
                    <p>
                      <span class="label">隔离类型：</span>
                      {{ val.quaraTypeLabel || "-" }}
                    </p>
                    <p>
                      <span class="label">核酸检测频次：</span>
                      {{ val.chkFrequencyLabel }}
                    </p>
                    <p>
                      <span class="label">隔离日期：</span>
                      {{ val.quaraStartDate }} / {{ val.quaraEndDate }}
                    </p>
                    <p>
                      <span class="label">返岗日期：</span>
                      {{ val.reworkDate || "/" }}
                    </p>
                  </div>
                </div>
                <template #right>
                  <van-button
                    square
                    text="删除"
                    type="danger"
                    class="action-button"
                    @click="handleDelete(val)"
                  />
                </template>
              </van-swipe-cell>
            </van-list>
            <!-- 是否代填报选择 -->
            <van-action-sheet
              v-model="showIsSelfPicker"
              cancel-text="取消"
              :actions="isSelfFlagList"
              @select="onIsSelfConfirm"
            />
            <van-empty
              v-if="!loading && !listData.length"
              class="custom-image"
              :image="require('../../../../assets/images/empty.png')"
              description="暂无数据"
            />
          </van-pull-refresh>
        </van-row>
      </div>
    </basic-layout>
    <!-- 筛选条件弹出框 -->
    <queryPopup
      ref="queryPopupRef"
      @handleSearch="onRefresh"
      @handleReset="handleReset"
    >
      <van-form class="filterBox">
        <label>是否代填报</label>
        <van-field>
          <template #input>
            <div class="textCon" @click="showIsSelfPicker = true">
              <span v-if="!isSelfFlagLebal" style="color: #aaa"
                >请选择是否代填报</span
              >
              <span v-else>{{ isSelfFlagLebal }}</span>
            </div>
          </template>
        </van-field>
        <label>隔离开始时间</label>
        <van-field
          readonly
          clickable
          :value="quaraStartDateInterval"
          @click="quaraStartDateShow = true"
          placeholder="点击选择隔离开始时间"
        />
        <label>隔离结束时间</label>
        <van-field
          readonly
          clickable
          :value="quaraEndDateInterval"
          @click="quaraEndDateShow = true"
          placeholder="点击选择隔离结束时间"
        />
      </van-form>
    </queryPopup>
    <van-calendar
      v-model="quaraStartDateShow"
      :min-date="minDate"
      :max-date="maxDate"
      :show-confirm="false"
      type="range"
      :allow-same-day="true"
      @confirm="onQuaraStartDateConfirm"
    />
    <van-calendar
      v-model="quaraEndDateShow"
      :min-date="minDate"
      :max-date="maxDate"
      :show-confirm="false"
      type="range"
      :allow-same-day="true"
      @confirm="onQuaraEndDateConfirm"
    />
    <!-- 新增/详情/编辑 弹出框 -->
    <fullscreenModal
      :modal="fullscreenModal"
      :isAdd="isAdd"
      label="突发安全隔离登记"
      :showSubmit="false"
      :editType="editType"
      @handleClose="fullscreenModal = false"
      @handleCancel="editType = 'detail'"
      @handleEdit="handleUpdate"
      @handleSave="$refs.editFormRef.handleSave()"
    >
      <detail v-show="editType == 'detail'" ref="detailRef"></detail>
      <edit-form
        v-show="editType == 'edit'"
        @close="fullscreenModal = false"
        @refresh="refreshData"
        @handleCheckRefresh="handleCheckRefresh"
        ref="editFormRef"
      />
    </fullscreenModal>
    <full-loading v-if="loading"></full-loading>
  </div>
</template>

<script>
import { queryDic } from "@/api/common";
import {
  getPageForSuddenSafe,
  querySuddenSafeDetail,
  deleteSuddenSafe,
  queryTestList,
} from "@/api/srvAssurance/epidprevention/suddenSafe/suddenSafePerson";
import editForm from "./editForm.vue";
import detail from "./detail.vue";
export default {
  components: { editForm, detail },
  data() {
    return {
      formData: {
        isSelfFlag: "",
        quaraStartDateBegin: "",
        quaraStartDateEnd: "",
        quaraEndDateBegin: "",
        quaraEndDateEnd: "",
        keyword: "",
        pageNum: 1,
        pageSize: 20,
      },
      showIsSelfPicker: false, //是否代填报picker
      loading: false,
      finished: false,
      refreshLoading: false,
      fullscreenModal: false,
      quaraStartDateShow: false, //隔离开始时间show
      quaraEndDateShow: false, //隔离结束时间show
      quaraStartDateInterval: "", //隔离开始时间区间
      quaraEndDateInterval: "", //隔离结束时间区间
      isSelfFlagList: [], // 是否代填报dic
      isSelfFlagLebal: "", //是否代填报搜索框
      minDate: new Date(new Date().getFullYear() - 1, 0, 1),
      maxDate: new Date(new Date().getFullYear(), 11, 31),
      totalPage: 0, //总页数
      isAdd: false,
      editType: "",
      listData: [], // 列表数据
      currentParam: {}, // 保存当前查看详情的row数据
    };
  },
  created() {
    if (sessionStorage.getItem("prjData")) {
      var prjData = JSON.parse(sessionStorage.getItem("prjData"));
      this.projectId = prjData.projectId || "";
    }
  },
  mounted() {
    this.getSearch();
    this.queryDicData();
  },
  methods: {
    // 获取表格数据
    getSearch() {
      this.loading = true;
      getPageForSuddenSafe(this.formData)
        .then((res) => {
          this.loading = false;
          if (res.code === 1000 && res.data) {
            this.listData = [...this.listData, ...res.data.records];
            if (this.listData.length >= res.data.total) {
              this.finished = true;
            }
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
        });
    },
    onRefresh() {
      this.refreshLoading = false;
      this.finished = false;
      this.listData = [];
      this.formData.pageNum = 1;
      this.getSearch();
    },
    onLoad() {
      this.formData.pageNum++;
      this.getSearch();
    },
    //刷新数据
    refreshData(data) {
      if (this.isAdd) {
        this.refreshLoading = false;
        this.finished = false;
        this.listData = [];
        this.formData.pageNum = 1;
        this.getSearch();
      } else {
        this.getDetailData(data);
      }
    },
    //获取最新的详情页数据
    async getDetailData(data) {
      let res = await querySuddenSafeDetail(`?quarantineId=${data}`);
      if (res.code == "1000" && res.data) {
        this.currentParam = res.data;
        this.$refs.detailRef.getData(this.currentParam);
        this.onRefresh();
      }
    },
    // 重置
    handleReset() {
      this.formData = {
        isSelfFlag: "",
        quaraStartDateBegin: "",
        quaraStartDateEnd: "",
        quaraEndDateBegin: "",
        quaraEndDateEnd: "",
        keyword: "",
        pageNum: 1,
        pageSize: 20,
      };
      this.quaraStartDateInterval = "";
      this.quaraEndDateInterval = "";
      this.isSelfFlagLebal = "";
      this.onRefresh();
    },
    // 新建数据
    handleAdd() {
      this.fullscreenModal = true;
      this.editType = "edit";
      this.isAdd = true;
      this.$refs.editFormRef.resetForm();
      this.currentParam = {};
    },
    // 查看详情
    async handleDetail(param) {
      this.fullscreenModal = true;
      this.editType = "detail";
      this.isAdd = false;
      var detailInfo = [];
      let item = param;
      this.currentParam = param;
      this.$refs.detailRef.getData(detailInfo);
      this.loading = true;
      let res = await querySuddenSafeDetail(
        `?quarantineId=${param.quarantineId}`
      );
      if (res.status == "1000" && res.data) {
        item = res.data;
        this.currentParam = res.data;
      }
      this.loading = false;
      // this.setDetailInfo(item);
      this.$refs.detailRef.getData(item);
      //核酸检测查询
      var testStrs = { relaId: param.quarantineId, busiType: "4" };
      let testRes = await queryTestList(testStrs);
      let checkInfo = [];
      if (testRes.code == "1000" && testRes.data) {
        checkInfo = testRes.data;
      }
      this.$refs.detailRef.getTestData(checkInfo);
    },
    //设置详情参数
    setDetailInfo(item) {
      let detailInfo = [
        {
          title: "是否代他人填报",
          prop: "isSelfFlagLabel",
          value: item.isSelfFlagLabel,
        },
        {
          title: "姓名",
          prop: "ctrlor",
          value: item.ctrlor,
        },
        {
          title: "员工性质",
          prop: "empNatureLabel",
          value: item.empNatureLabel,
        },
        {
          title: "核酸检测频次",
          prop: "chkFrequencyLabel",
          value: item.chkFrequencyLabel,
        },
        {
          title: "健康码",
          prop: "healthColorLabel",
          value: item.healthColorLabel ? item.healthColorLabel : "/",
        },
        {
          title: "隔离类型",
          prop: "quaraTypeLabel",
          value: item.quaraTypeLabel,
        },
        {
          title: "隔离日期",
          prop: "quaraStartDate",
          value: item.quaraStartDate
            ? item.quaraEndDate
              ? item.quaraStartDate + "/" + item.quaraEndDate
              : "/"
            : "/",
        },
        {
          title: "返岗日期",
          prop: "reworkDate",
          value: item.reworkDate ? item.reworkDate : "/",
        },
      ];
      this.$refs.detailRef.getData(detailInfo);
    },
    //更新详情页核酸检测信息
    handleCheckRefresh(val) {
      this.$refs.detailRef.getTestData(val);
    },
    // 编辑数据
    handleUpdate() {
      this.editType = "edit";
      this.$refs.editFormRef.resetForm();
      this.$refs.editFormRef.getData(this.currentParam);
    },
    // 是否代填报选择
    onIsSelfConfirm(item) {
      this.formData.isSelfFlag = item.codeValue;
      this.isSelfFlagLebal = item.valueAlias;
      this.showIsSelfPicker = false;
      this.onRefresh();
    },
    // 下拉框数据
    queryDicData() {
      // 是否代填报
      queryDic("IS_FLAG_CODE").then((res) => {
        if (res.code === 1000 && res.data) {
          this.isSelfFlagList = res.data;
        }
      });
    },
    //日期格式
    formatDate(date) {
      return `${date.getFullYear()}-${
        date.getMonth() < 9
          ? "0" + (date.getMonth() + 1)
          : "" + (date.getMonth() + 1)
      }-${date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate()}`;
    },
    // 隔离开始时间选择
    onQuaraStartDateConfirm(date) {
      this.formData.quaraStartDateBegin = this.formatDate(date[0]);
      this.formData.quaraStartDateEnd = this.formatDate(date[1]);
      this.quaraStartDateInterval = `${this.formatDate(
        date[0]
      )} / ${this.formatDate(date[1])}`;
      this.quaraStartDateShow = false;
    },
    // 隔离结束时间选择
    onQuaraEndDateConfirm(date) {
      this.formData.quaraEndDateBegin = this.formatDate(date[0]);
      this.formData.quaraEndDateEnd = this.formatDate(date[1]);
      this.quaraEndDateInterval = `${this.formatDate(
        date[0]
      )} / ${this.formatDate(date[1])}`;
      this.quaraEndDateShow = false;
    },
    // 删除
    handleDelete(val) {
      this.$Dialog
        .confirm({
          title: "是否确定删除该数据？",
        })
        .then(async () => {
          var res = await deleteSuddenSafe([val.quarantineId]);
          if (res.code === 1000) {
            this.$Notify({ type: "success", message: "删除成功！" });
            this.onRefresh();
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped lang="less">
.listCon {
  .cellContent {
    .top {
      padding: 0 10px;
      box-sizing: border-box;
      .flexTit {
        .vanTagStyle {
          margin: 0px 10px;
          // padding: 0px 0px 3px 0px;
        }
        .healthColor {
          margin: 0px 5px 0px 0px;
          height: 20px;
        }
      }
      .second {
        color: #999;
        margin: -6px 0px -2px 0px;
        padding: 0px;
      }
    }
    .bottom {
      margin-top: 0px;
      padding: 0px 10px 0;
      border-top: 1px solid #eee;
    }
  }
}
</style>
